<template>
  <div style="padding: 0 16px 10px 16px">
    <van-nav-bar :fixed="true">
      <template #title>
        <p style="font-size: 16px;color: #333333;font-weight: 400;">首页</p>
      </template>
    </van-nav-bar>
    <div style="width: 100%;height: 46px;"></div>
    <van-swipe class="my-swipe" :autoplay="3000" @change="checkActiveClick">
      <van-swipe-item v-for="item in bannerList" :key="item.entryId" @click="onEntryItemClick(item.entryId, item.extraData)">
        <img :src="item.imageData || swiperImg2" alt="">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <p v-for="(item, index) in bannerList" :key="index" :class="{ swiperActive : checkActive === index}"></p>
        </div>
      </template>
    </van-swipe>
    <div class="commons" v-for="group in commonList" :key="group.entryId">
      <p class="commons-title">{{ group.entryName }}</p>
      <van-grid class="commons-ctn" :column-num="4" :border="false" icon-size="44px">
        <van-grid-item
          v-for="(item,index) in group.children"
          :index="index" :key="item.entryId"
          :text="item.entryName"
          :icon="item.imageData || homeGridIcon2x"
          @click="onEntryItemClick(item.entryId, item.extraData)"
        >
        </van-grid-item>
      </van-grid>
    </div>
    <van-cell class="cell"
      title-style="color:#333333;font-size:16px;font-weight:bold;"
      title="待办任务" :border="false" is-link
      @click="toTaskList('formMyTask')"
    >
      <van-badge slot="default" v-if="runtimeTaskCount != null && runtimeTaskCount!=0" :content="runtimeTaskCount" max="99" color="#EF502F"/>
    </van-cell>
    <van-cell class="cell"
      title-style="color:#333333;font-size:16px;font-weight:bold;"
      title="历史任务" :border="false" is-link
      @click="toTaskList('formMyHistoryTask')"
    >
    </van-cell>
    <van-cell class="cell"
      title-style="color:#333333;font-size:16px;font-weight:bold;"
      title="已办任务" :border="false" is-link
      @click="toTaskList('formMyApprovedTask')"
    >
    </van-cell>
    <div style="width: 100%;height: 50px;"></div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { treeDataTranslate, setObjectToSessionStorage } from '@/utils';
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
// import swiperImg1 from '@/assets/home/swiperImg.png'
import swiperImg2 from '@/assets/home/swiperImg2.png'
import tabbar from '@/components/tabbar/index'
import { FlowOperationController } from '@/api/flowController.js';

export default {
  components: {
    tabbar
  },
  mixins: [uploadMixin, statsDateRangeMixin],
  data() {
    return {
      swiperImg2: swiperImg2,
      runtimeTaskCount: undefined,
      homeGridIcon2x: require('@/assets/home/homeGridIcon2x.png'),
      checkActive: 0
    }
  },
  mounted() {
    // 初始化页面数据
    this.formInit();
  },
  methods: {
    checkActiveClick (index) {
      this.checkActive = index
    },
    jumpTo (entryId, menuItem) {
      setObjectToSessionStorage('currentMenuId', entryId);
      if (menuItem != null) {
        // 路由菜单
        if (menuItem.bindType === this.SysMenuBindType.ROUTER && menuItem.formRouterName != null && menuItem.formRouterName !== '') {
          this.$router.push({
            name: menuItem.formRouterName
          });
        }
        // 在线表单菜单
        if (menuItem.bindType === this.SysMenuBindType.ONLINE_FORM && menuItem.onlineFormId != null && menuItem.onlineFormId !== '') {
          this.$router.push({
            name: 'onlineForm',
            query: {
              formId: menuItem.onlineFormId,
              formType: this.SysOnlineFormType.QUERY
            }
          });
        }
        // 工单列表菜单
        if (menuItem.bindType === this.SysMenuBindType.WORK_ORDER &&
          menuItem.onlineFormId != null && menuItem.onlineFormId !== '' &&
          menuItem.onlineFlowEntryId != null && menuItem.onlineFlowEntryId !== '') {
          this.$router.push({
            name: 'onlineForm',
            query: {
              formId: menuItem.onlineFormId,
              entryId: menuItem.onlineFlowEntryId,
              formType: this.SysOnlineFormType.WORK_ORDER
            }
          });
        }
        // 报表菜单
        if (menuItem.bindType === this.SysMenuBindType.REPORT && menuItem.reportPageId != null && menuItem.reportPageId !== '') {
          this.$router.push({
            name: 'onlineReportForm',
            query: {
              pageId: menuItem.reportPageId
            }
          });
        }
      }
    },
    onEntryItemClick (entryId, extraObject) {
      this.jumpTo(entryId, extraObject);
    },
    toTaskList (routerName) {
      if (routerName != null && routerName !== '') {
        this.$router.push({
          name: routerName
        });
      }
    },
    formInit() {
      FlowOperationController.countRuntimeTask(this).then(res => {
        this.runtimeTaskCount = res.data;
        
      }).catch(e => {});
    }
  },
  computed: {
    getFinalEntryList() {
      return (this.getHomeEntryList || []).map(item => {
        let temp = {
          ...item
        }
        try {
          temp.imageData = temp.imageData ? JSON.parse(temp.imageData) : undefined;
          if (temp.imageData) {
            temp.imageData = this.getUploadFileUrl(temp.imageData, { filename: temp.imageData.filename })
          }
        } catch (e) {
          temp.imageData = null;
        }
        return temp;
      });
    },
    commonList() {
      if (Array.isArray(this.getFinalEntryList)) {
        let tempList = this.getFinalEntryList.filter(item => {
          return item.entryType === this.MobileEntryType.GROUP || item.entryType === this.MobileEntryType.SUDOKU;
        });
        if (Array.isArray(tempList)) {
          return treeDataTranslate(tempList.map(item => {
            return {
              ...item
            }
          }), 'entryId', 'parentId').filter(item => (item.children || []).length > 0);
        }
      }

      return [];
    },
    bannerList() {
      if (Array.isArray(this.getFinalEntryList)) {
        return this.getFinalEntryList.filter(item => {
          return item.entryType === this.MobileEntryType.BANNER;
        });
      } else {
        return [];
      }
    },
    ...mapGetters(['getHomeEntryList'])
  }
}
</script>

<style scoped>
  .my-swipe{
    margin-top: 16px;
  }
  .my-swipe .van-swipe-item{
    height: 128px;
    width: 100%;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 100%;
  }

.swiperActive {
    width: 10px;
    height: 4px;
    background-color: #ffffff;
    opacity: 1;
}
  .commons{
    margin-top: 16px;
    width: 100%;
    border-radius: 8px;
    padding: 12px 0;
    background: #ffffff;
  }
  .commons-title{
    margin: 0;
    padding: 12px 15px;
    color: #000000;
    font-weight: bold;
    font-size: 16px;
  }
  .commons-ctn-item-icon{
    width: 44px;
    height: 44px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  .commons-ctn-item-text{
    width: 100%;
    font-size: 12px;
    color: #333333;
    text-align: center;
  }
  .cell{
    width: 100%;
    height: 56px;
    background-color: #ffffff;
    border-radius: 8px;
    margin: 16px 0;
    display: flex;
    align-items: center;
  }
</style>
<style>
 .custom-indicator {
    position: absolute;
    bottom: 5px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
  }
  .custom-indicator p {
    width: 6px;
    height: 4px;
    border-radius: 2px;
    background-color: #ffffff;
    opacity: 0.5;
  }
  .custom-indicator p:not(:last-child) {
    margin-right: 3px;
  }
</style>
